<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('统计')"/>
    <link rel="stylesheet" href="../admin/css/other/result.css"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="column1" style="min-height:400px;"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="column2" style="min-height:400px;"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="column3" style="min-height:400px;"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="column4" style="min-height:400px;"></div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script>
    layui.use(['echarts', 'jquery'], function () {
        let echarts = layui.echarts;
        let $ = layui.jquery;
        col1();
        col2();
        col3();
        col4();

        function col1() {
            var column1 = echarts.init(document.getElementById('column1'));
            column1.setOption({
                color: ['#3398DB'],
                //设置标题
                title: {
                    text: '设备库存信息'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            //坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线
                    }
                },
                legend: {
                    top: '5%',
                    right: '10%',
                    data: ['数量']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [
                    {
                        name: '数量',
                        type: 'line',
                        data: []
                    }
                ]
            });

            //加载时显示loading动画
            column1.showLoading();
            //放x轴值得姓名的数组
            var name = [];

            //放y轴值得货物数量的数组
            var value = [];

            //利用ajax从后台给数组存值
            $.ajax({
                type: "get",
                url: "/device/summ/data1",     //请求发送到Controller list处
                dataType: "json",        //返回数据形式为json
                success: function (data) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $(data).each(function (i, e) {
                        for (var i = 0; i < e.data.length; i++) {
                            name.push(e.data[i].name);
                            value.push(e.data[i].value);
                        }
                    });
                    column1.hideLoading();    //隐藏加载动画
                    column1.setOption({        //加载数据图表
                        xAxis: {
                            data: name
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '数量',
                            type: 'line',
                            data: value,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,       //开启显示
                                        position: 'top',  //在上方显示
                                        textStyle: {      //数值样式
                                            color: 'black',
                                            fontSize: 12
                                        }
                                    }
                                }
                            }

                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    column1.hideLoading();
                }
            })
        };


        function col2() {
            var column2 = echarts.init(document.getElementById('column2'));
            column2.setOption({
                color: ['#DE3143'],
                //设置标题
                title: {
                    text: '近7日设备维修情况'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            //坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线
                    }
                },
                legend: {
                    top: '5%',
                    right: '10%',
                    data: ['数量']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [
                    {
                        name: '数量',
                        type: 'line',
                        data: []
                    }
                ]
            });

            //加载时显示loading动画
            column2.showLoading();
            //放x轴值得姓名的数组
            var name = [];
            //放y轴值得货物数量的数组
            var value = [];

            //利用ajax从后台给数组存值
            $.ajax({
                type: "get",
                url: "/device/summ/data2",     //请求发送到Controller list处
                dataType: "json",        //返回数据形式为json
                success: function (data) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $(data).each(function (i, e) {
                        for (var i = 0; i < e.data.length; i++) {
                            name.push(e.data[i].name);
                            value.push(e.data[i].value);
                        }
                    });
                    column2.hideLoading();    //隐藏加载动画
                    column2.setOption({        //加载数据图表
                        xAxis: {
                            data: name
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '数量',
                            type: 'line',
                            data: value,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,       //开启显示
                                        position: 'top',  //在上方显示
                                        textStyle: {      //数值样式
                                            color: 'black',
                                            fontSize: 12
                                        }
                                    }
                                }
                            }

                        }],

                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    column2.hideLoading();
                }
            })
        };

        function col3() {
            var column3 = echarts.init(document.getElementById('column3'));
            column3.setOption({
                color: ['#9E87FF'],
                //设置标题
                title: {
                    text: '近7日设备报废情况'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            //坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线
                    }
                },
                legend: {
                    top: '5%',
                    right: '10%',
                    data: ['数量']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        data: []
                    }
                ]
            });

            //加载时显示loading动画
            column3.showLoading();
            //放x轴值得姓名的数组
            var name = [];

            //放y轴值得货物数量的数组
            var value = [];

            //利用ajax从后台给数组存值
            $.ajax({
                type: "get",
                url: "/device/summ/data3",     //请求发送到Controller list处
                dataType: "json",        //返回数据形式为json
                success: function (data) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $(data).each(function (i, e) {
                        for (var i = 0; i < e.data.length; i++) {
                            name.push(e.data[i].name);
                            value.push(e.data[i].value);
                        }
                    });
                    column3.hideLoading();    //隐藏加载动画
                    column3.setOption({        //加载数据图表
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                dataView: {readOnly: false},
                                magicType: {type: ['line', 'bar']},
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            data: name
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '数量',
                            type: 'line',
                            barWidth: '60%',
                            data: value,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,       //开启显示
                                        position: 'top',  //在上方显示
                                        textStyle: {      //数值样式
                                            color: 'black',
                                            fontSize: 12
                                        }
                                    }
                                }
                            }

                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    column3.hideLoading();
                }
            })
        };

        function col4() {
            var column4 = echarts.init(document.getElementById('column4'));
            column4.setOption({
                color: ['#fe9a8b'],
                //设置标题
                title: {
                    text: '近7日设备领用数量'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            //坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线
                    }
                },
                legend: {
                    top: '5%',
                    right: '10%',
                    data: ['数量']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        data: []
                    }
                ]
            });

            //加载时显示loading动画
            column4.showLoading();
            //放x轴值得姓名的数组
            var name = [];

            //放y轴值得货物数量的数组
            var value = [];

            //利用ajax从后台给数组存值
            $.ajax({
                type: "get",
                url: "/device/summ/data4",  //请求发送到Controller list处
                dataType: "json",        //返回数据形式为json
                success: function (data) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $(data).each(function (i, e) {
                        for (var i = 0; i < e.data.length; i++) {
                            name.push(e.data[i].name);
                            value.push(e.data[i].value);
                        }
                    });
                    column4.hideLoading();    //隐藏加载动画
                    column4.setOption({        //加载数据图表
                        xAxis: {
                            data: name
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '数量',
                            type: 'line',
                            barWidth: '60%',
                            data: value,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,       //开启显示
                                        position: 'top',  //在上方显示
                                        textStyle: {      //数值样式
                                            color: 'black',
                                            fontSize: 12
                                        }
                                    }
                                }
                            }

                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    column4.hideLoading();
                }
            })
        };
    })

</script>
</body>
</html>
